

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx'
import $ from 'jquery'
import { Popconfirm, Progress, notification, message, Modal, Drawer, Alert, Tabs, Table, Divider, Tag, Timeline, Tree, Statistic, Popove, List, Empty, Descriptions, Calendar, Card, Carousel, Collapse, Tooltip, Comment, Badge, Avatar, TimePicker, Transfer, TreeSelect, Select, Slider, Switch, Radio, Rate, Mentions, InputNumber, Input, Form, DatePicker, Cascader, Checkbox, AutoComplete, Button, Upload, Icon, Spin, Typography, Row, Col, Header, Footer, Sider, Content, Affix, Breadcrumb, Menu, Dropdown, Pagination, PageHeader, Steps } from 'antd'
import moment from 'moment';
const { SubMenu } = Menu;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const { Step } = Steps;
const { Title } = Typography;
const { Option } = Mentions;
const { Option1 } = Select;
const { Panel } = Collapse;
const { TabPane } = Tabs;



@inject('YunYingStore')
@observer
export default class ChooseAttr extends Component {
    state = {
        nowSetWhichAttr: undefined,
        ChoosedAttr: false,//选择过属性了
    }
    render() {
        let that = this
        let obj = [
            {
                年龄阶段: ['青少年', '年轻人', '成年人', '老年人']
            },
            { 附属物: ['背包', '袋子', '小手提包', '帽子'] },
            { 下衣颜色: ['黑色', '蓝色', '棕色', '灰色', '绿色', '粉色', '紫色', '白色', '黄色'] },
            {
                上衣颜色: ['黑色', '蓝色', '绿色', '灰色', '紫色', '红色', '白色', '黄色']
            },
            {
                下衣类型: ['裙子', '裤子', '短裤']
            },
            {
                上衣类型: ['长袖装', '短袖装']
            }, {
                发型长短: ['长头发', '短头发']
            },
            { 性别: ['男性', '女性'] }
        ]
        return (
            <React.Fragment>
                {
                    obj.map((item, index) => {
                        return (
                            <Select
                                showSearch
                                style={{ width: 100 }}
                                placeholder={Object.keys(item)}
                                optionFilterProp="children"
                                onChange={onChange}
                                onFocus={() => {
                                    onFocus(Object.keys(item))
                                }}
                                onBlur={() => {
                                    onBlur(Object.keys(item))
                                }}
                                onSearch={onSearch}
                                size="small"
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            >
                                {
                                    item[Object.keys(item)].map((item1, index1) => {
                                        return (<Option value={item1}>{item1}</Option>)
                                    })
                                }
                            </Select>
                        );
                    })
                }
            </React.Fragment >
        );
        function onChange(value) {
            console.log(`selected ${value}`);
            if (!that.state.ChoosedAttr) {
                that.props.YunYingStore.AddNowWhichStep('点击搜索')
                that.props.YunYingStore.ChangeSearchShow(true)
                that.setState((prevState) => ({
                    ChoosedAttr: true
                }))
            }
            let json = ''
            let s = 0.8//相似度暂时设为8
            switch (value) {
                case '年轻人':
                    json = 'young'
                    break;
                case '青少年':
                    json = 'teenager'
                    break;
                case '成年人':
                    json = 'adult'
                    break;
                case '老年人':
                    json = 'old'
                    break;
                case '背包':
                    json = 'backpack'
                    break;
                case '袋子':
                    json = 'bag'
                    break;
                case '小手提包':
                    json = 'handbag'
                    break;
                case '帽子':
                    json = 'hat'
                    break;
                case '黑色':
                    if (that.state.nowSetWhichAttr === '下衣颜色') {
                        json = 'downblack'
                    } else if (that.state.nowSetWhichAttr === '上衣颜色') {
                        json = 'upblack'
                    }
                    break;
                case '蓝色':
                    if (that.state.nowSetWhichAttr === '下衣颜色') {
                        json = 'downblue'
                    } else if (that.state.nowSetWhichAttr === '上衣颜色') {
                        json = 'upblue'
                    }
                    break;
                case '灰色':
                    if (that.state.nowSetWhichAttr === '下衣颜色') {
                        json = 'downgray'
                    } else if (that.state.nowSetWhichAttr === '上衣颜色') {
                        json = 'upgray'
                    }
                    break;
                case '绿色':
                    if (that.state.nowSetWhichAttr === '下衣颜色') {
                        json = 'downgreen'
                    } else if (that.state.nowSetWhichAttr === '上衣颜色') {
                        json = 'upgreen'
                    }
                    break;

                case '粉色':
                    json = 'downpink'
                    break;
                case '紫色':
                    if (that.state.nowSetWhichAttr === '下衣颜色') {
                        json = 'downpurple'
                    } else if (that.state.nowSetWhichAttr === '上衣颜色') {
                        json = 'uppurple'
                    }
                    break;
                case '白色':

                    if (that.state.nowSetWhichAttr === '下衣颜色') {
                        json = 'downwhite'
                    } else if (that.state.nowSetWhichAttr === '上衣颜色') {
                        json = 'upwhite'
                    }
                    break;
                case '黄色':
                    if (that.state.nowSetWhichAttr === '下衣颜色') {
                        json = 'downyellow'
                    } else if (that.state.nowSetWhichAttr === '上衣颜色') {
                        json = 'upyellow'
                    }
                    break;
                case '裙子':
                    json = 'dress'
                    break;
                case '裤子':
                    json = 'pants'
                    break;
                case '长袖装':
                    json = 'long_sleeve'
                    break;
                case '短袖装':
                    json = 'short_sleeve'
                    break;
                case '短头发':
                    json = 'short_hair'
                    break;
                case '长头发':
                    json = 'long_hair'
                    break;
                case '男性':
                    json = ''
                    break;
                case '女性':
                    json = 'female'
                    break;
                default:
                    json = ''
                    break;
            }
            that.props.YunYingStore.StorageAttrs(json)
        }
        function onBlur(who) {
            // console.log('blur');
            // console.log(who);
        }

        function onFocus(who) {
            that.setState((prevState) => ({
                nowSetWhichAttr: who
            }))
            console.log(who);
        }

        function onSearch(val) {
            console.log('search:', val);
        }
    }
}
